<!-- src/views/outbound/outbound/SignReceiveDialog.vue -->
<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

// 接收父组件传递的数据（多个商品）
const props = defineProps({
  items: {
    type: Array,
    default: () => [] // 设置默认值为空数组
  }
})

// 表单数据（直接使用 props.items，并添加 damagedCount 字段）
const formItems = ref([])

// 控制弹框显示/隐藏
const visible = ref(false)

// 监听 props.items 的变化
watch(() => props.items, (newItems) => {
  if (!Array.isArray(newItems)) {
    formItems.value = []
    return
  }
  
  formItems.value = newItems.map(item => ({
    ...item,
    damagedCount: 0
  }))
}, { immediate: true })

// 打开弹框 - 支持传参
const open = (items) => {
  if (!Array.isArray(items) || items.length === 0) {
    ElMessage.warning('没有可签收的商品')
    return
  }
  
  // 使用传入的 items 数据
  formItems.value = items.map(item => ({
    ...item,
    damagedCount: 0
  }))
  visible.value = true
}

// 关闭弹框
const close = () => {
  visible.value = false
}

// 提交
const submit = async () => {
  const invalidItems = formItems.value.filter(item => item.damagedCount === null || item.damagedCount < 0)
  if (invalidItems.length > 0) {
    ElMessage.error('破损数量不能小于0')
    return
  }

  try {
    // 调用接口批量提交签收数据
    // const res = await fetch('/api/outbound/sign-receive-batch', {
    //   method: 'POST',
    //   headers: { 'Content-Type': 'application/json' },
    //   body: JSON.stringify(
    //     formItems.value.map(item => ({
    //       id: item.id,
    //       damagedCount: item.damagedCount
    //     }))
    //   )
    // })

    // 注意：这里的 res 变量未定义，需要取消注释相关代码
    // if (res.ok) {
    if (true) { // 临时处理，实际应根据API响应判断
      ElMessage.success('签收成功！')
      emit('success', formItems.value)
      close()
    } else {
      ElMessage.error('签收失败，请重试')
    }
  } catch (error) {
    ElMessage.error('网络错误，请检查连接')
  }
}

// 处理关闭前逻辑
const handleClose = () => {
  close()
}

// 发送事件给父组件
const emit = defineEmits(['success'])

// 暴露方法给父组件调用
defineExpose({
  open,
  close
})
</script>

<template>
  <el-dialog title="签收" v-model="visible" width="800px" :before-close="handleClose">
    <el-table :data="formItems" style="width: 100%">
      <el-table-column prop="title" label="商品名称" />
      <el-table-column prop="commodityCode" label="商品编码" />
      <el-table-column prop="specCode" label="规格编码" />
      <el-table-column label="到货破损数量">
        <template #default="{ row }">
          <el-input-number v-model="row.damagedCount" :min="0" :max="9999" controls-position="right"
            placeholder="请输入破损数量" />
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">关闭</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>